<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="icon" href="./img/favicon.ico">
</head>
<body>
    <!-- f1顶部条 -->
    <div class="f1">
        <div class="container">
            <!-- 位置 -->
            <div>
                <img src="./img/gps.png">
                <div>山东</div>
            </div>
            <!-- 导航菜单 -->
            <div>
                <ul class="f1_nav_list">
                    <li>
                        <a href="#">你好，请登录</a>
                        <span><a href="#">免费注册</a></span>
                    </li>
                    <li>
                        <a href="#">我的订单</a>
                    </li>
                    <li>
                        <a href="#">我的京东</a>
                        <img src="./img/sanjiao.png">
                    </li>
                    <li>
                        <a href="#">京东会员</a>
                    </li>
                    <li>
                        <span><a href="#">政企采购</a></span>
                        <img src="./img/sanjiao.png">
                    </li>
                    <li>
                        <a href="#">客户服务</a>
                        <img src="./img/sanjiao.png">
                    </li>
                    <li>
                        <a href="#">网站导航</a>
                        <img src="./img/sanjiao.png">
                    </li>
                    <li>
                        <a href="#">手机京东</a>
                    </li>
                    <li>
                        <a href="#">网站无障碍</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- f2 logo搜索框 -->
    <div class="f2">
        <div class="container">
            <!-- logo -->
            <img src="./img/logo.gif">
            <!-- 中间部分 -->
            <div class="f2_middle">
                <div>
                    <!-- 搜索框 -->
                    <div class="f2_search">
                        <input type="text" placeholder="笔记本">
                        <div><img src="./img/search.png" ></div>
                        <div><img src="./img/camera.png"></div>
                    </div>
                    <!-- 购物车 -->
                    <div class="cart">
                        <img src="./img/cart.png"><span>我的购物车</span>
                        <div>0</div>
                    </div>
                </div>
                <!-- 搜索框下方的列表 -->
                <div class="f2_menu_list">
                    <ul>
                        <li><span><a href="#">京东礼品卡</a></span></li>
                        <li><a href="#">游戏盛典</a></li>
                        <li><a href="#">海信电视</a></li>
                        <li><a href="#">5折爆品</a></li>
                        <li><a href="#">拍拍好物</a></li>
                        <li><a href="#">美妆年礼</a></li>
                        <li><a href="#">超薄冰箱</a></li>
                        <li><a href="#">服饰满减</a></li>
                        <li><a href="#">每100-50</a></li>
                    </ul>
                </div>
            </div>
            <!-- 展示 -->
            <img src="./img/jd.webp">
        </div>
    </div>
    <!-- f3 菜单 -->
    <div class="f3">
        <div class="container">
            <ul>
                <li><a href="#">秒杀</a></li>
                <li><a href="#">优惠券</a></li>
                <li><a href="#">PLUS会员</a></li>
                <li><a href="#">品牌闪购</a></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">京东家电</a></li>
                <li><a href="#">京东超市</a></li>
                <li><a href="#">京东生鲜</a></li>
                <li><a href="#">京东国际</a></li>
                <li><a href="#">京东云</a></li>
            </ul>
        </div>
    </div>
    <!-- f4 菜单选项 轮播广告 -->
    <div class="f4">
        <div class="container">
            <!-- 菜单选项 -->
            <div class="f4_left">
                <ul>
                    <li><a href="#">家用电器</a></li>
                    <li><a href="#">手机/运营商/数码</a></li>
                    <li><a href="#">电脑/办公</a></li>
                    <li><a href="#">家具/家居/家装/厨具</a></li>
                    <li><a href="#">男装/女装/童装/内衣</a></li>
                    <li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
                    <li><a href="#">美妆/个护清洁/宠物</a></li>
                    <li><a href="#">男鞋/运动/户外</a></li>
                    <li><a href="#">房产/汽车/汽车用品</a></li>
                    <li><a href="#">母婴/玩具乐器</a></li>
                    <li><a href="#">食品/酒类/生鲜</a></li>
                    <li><a href="#">艺术/礼品鲜花/农资绿植</a></li>
                    <li><a href="#">医药保健/计生情趣</a></li>
                    <li><a href="#">图书/文娱/教育/电子书</a></li>
                    <li><a href="#">机票/酒店/旅游/生活</a></li>
                    <li><a href="#">理财/众筹/白条/保险</a></li>
                    <li><a href="#">安装/维修/清洗/二手</a></li>
                    <li><a href="#">工业品</a></li>
                </ul>
            </div>
            <!-- 轮播 -->
            <div class="f4_middle">
                <!-- 主轮播 -->
                <div class="f4_middle_left">
                    <div class="carousel">
                        <img id="pic" src="./img/banner1.jpg">
                        <div id="main_prev"><img src="./img/prev.png"></div>
                        <div id="main_next"><img src="./img/next.png"></div>
                        <ul>
                            <li><a class="current" href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                    </div>
                </div>
                <!-- 右 -->
                <div class="f4_middle_right">
                    <!-- 侧边副轮播 -->
                    <div>
                        <!-- 轮播图片 -->
                        <div>
                            <img src="./img/jdcard.jpg">
                        </div>
                    </div>
                    <!-- 中 -->
                    <div>
                         <!-- 轮播图片 -->
                        <div>
                            <img src="./img/pc.jpg">
                        </div>
                    </div>
                    <!-- 下 -->
                    <div>
                         <!-- 轮播图片 -->
                        <div>
                            <img src="./img/imp1.jpg">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 用户栏 -->
            <div class="f4_right">
                <!-- 用户信息 -->
                <div class="f4_right_user">
                    <!-- 头像 -->
                    <img src="./img/avatar.png">
                    <div>
                        <div><a>Hi~欢迎逛京东!</a></div>
                        <ul>
                            <li><a href="#">登录</a></li>
                            <li><a href="#">注册</a></li>
                        </ul>
                    </div>
                    <!-- 按钮 -->
                    <div class="f4_btn">
                        <div>新人福利</div>
                        <div>PLUS会员</div>
                    </div>
                </div>
                <!-- 新闻资讯 -->
                <div>
                    <!-- 标题 -->
                    <div class="f4_title">
                        <div>京东快报</div>
                        <div><a href="#">更多&gt;&gt;</a></div>
                    </div>
                    <!-- 内容 -->
                    <div class="f4_mainer">
                        <!-- 一条内容 -->
                        <div>
                            <div>最新</div>
                            <div><a href="#">联想笔记本降价了！</a></div>
                        </div>
                        <!-- 一条内容 -->
                        <div>
                            <div>热评</div>
                            <div><a href="#">孙凯单身...</a></div>
                        </div>
                        <div>
                            <div>热评</div>
                            <div><a href="#">骑上我心爱的电动...</a></div>
                        </div>
                        <div>
                            <div>热门</div>
                            <div><a href="#">达内李文华中10亿...</a></div>
                        </div>
                    </div>
                </div>
                <!-- 杂项 -->
                <div class="f4_footer">
                    <div>
                        <!-- 1 -->
                        <div>
                            <img src="./img/phone.png">
                            <a href="#"><span>话费</span></a>
                        </div>
                        <!-- 2 -->
                        <div>
                            <img src="./img/jd.png">
                            <a href="#"><span>酒店</span></a>
                        </div>
                        <!-- 3 -->
                        <div>
                            <img src="./img/hc.png">
                            <a href="#"><span>火车票</span></a>
                        </div>
                        <!-- 4 -->
                        <div>
                            <img src="./img/lp.png">
                            <a href="#"><span>礼品卡</span></a>
                        </div>
                        <!-- 5 -->
                        <div>
                            <img src="./img/jy.png">
                            <a href="#"><span>加油卡</span></a>
                        </div>
                        <!-- 6 -->
                        <div>
                            <img src="./img/zc.png">
                            <a href="#"><span>众筹</span></a>
                        </div>
                        <!-- 7 -->
                        <div>
                            <img src="./img/licai.png">
                            <a href="#"><span>理财</span></a>
                        </div>
                        <!-- 8 -->
                        <div>
                            <img src="./img/sf.png">
                            <a href="#"><span>白条</span></a>
                        </div>
                        <!-- 9 -->
                        <div>
                            <img src="./img/dyp.png">
                            <a href="#"><span>电影票</span></a>
                        </div>
                        <!-- 10 -->
                        <div>
                            <img src="./img/jipiao.png">
                            <a href="#"><span>机票</span></a>
                        </div>
                        <!-- 9 -->
                        <div>
                            <img src="./img/game.png">
                            <a href="#"><span>游戏</span></a>
                        </div>
                        <!-- 9 -->
                        <div>
                            <img src="./img/qy.png">
                            <a href="#"><span>企业购</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer_f1  底部介绍-->
    <div class="footer_f1">
        <div class="container">
            <!-- 多 -->
            <div>
                <img src="./img/duo.jpg">
                <div class="h4">品类齐全，轻松购物</div>
            </div>
            <!-- 快 -->
            <div>
                <img src="./img/kuai.jpg">
                <div class="h4">多仓直发，极速配送</div>
            </div>
            <!-- 好 -->
            <div>
                <img src="./img/hao.jpg">
                <div class="h4">正品行货，精致服务</div>
            </div>
            <!-- 省 -->
            <div>
                <img src="./img/sheng.jpg">
                <div class="h4">天天低价，畅选无忧</div>
            </div>
        </div>
    </div>
    <!-- footer_f2  服务说明 -->
    <div class="footer_f2">
        <div class="container">
            <div class="footer_f2_title">
                <ul>
                    <li>购物指南</li>
                    <li>配送方式</li>
                    <li>支付方式</li>
                    <li>售后服务</li>
                    <li>特色服务</li>
                    <li>京东自营覆盖区县</li>
                </ul>
            </div>
            <div class="footer_f2_bottom">
                <!-- 1 -->
                <ul>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">会员介绍</a></li>
                    <li><a href="#">生活旅行</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">联系客服</a></li>
                </ul>
                <!-- 2 -->
                <ul>
                    <li><a href="#">上门自提</a></li>
                    <li><a href="#">211限时达</a></li>
                    <li><a href="#">配送服务查询</a></li>
                    <li><a href="#">配送费收取标准</a></li>
                    <li><a href="#">海外配送</a></li>
                </ul>
                <!-- 3 -->
                <ul>
                    <li><a href="#">货到付款</a></li>
                    <li><a href="#">在线支付</a></li>
                    <li><a href="#">分期付款</a></li>
                    <li><a href="#">公司转账</a></li>
                </ul>
                <!-- 4 -->
                <ul>
                    <li><a href="#">售后政策</a></li>
                    <li><a href="#">价格保护</a></li>
                    <li><a href="#">退款说明</a></li>
                    <li><a href="#">返修/退换货</a></li>
                    <li><a href="#">取消订单</a></li>
                </ul>
                <!-- 5 -->
                <ul>
                    <li><a href="#">夺宝岛</a></li>
                    <li><a href="#">DIY装机</a></li>
                    <li><a href="#">延保服务</a></li>
                    <li><a href="#">京东E卡</a></li>
                    <li><a href="#">京东通信</a></li>
                    <li><a href="#">京鱼座智能</a></li>
                </ul>
                <ul>
                    <li></li>
                </ul>
                <!-- 6 -->
                <div>
                    京东已向全国2661个区县提供自营配送服务，支持货到付款，POS机刷卡和售后上门服务
                    <div><a href="#">查看详情&gt;&gt;</a></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 轮播图
    let carouselIndex=1;
    main_prev.onclick=()=>{
        carouselIndex--;
        if(carouselIndex<1){
            carouselIndex=3;
        }
        pic.src=`./img/banner${carouselIndex}.jpg`;
    }
    main_next.onclick=()=>{
        carouselIndex++;
        if(carouselIndex>3){
            carouselIndex=1;
        }
        pic.src=`./img/banner${carouselIndex}.jpg`;
    }
    setInterval(()=>{
        carouselIndex++;
        if(carouselIndex>3){
            carouselIndex=1;
        }
        pic.style.opacity=1;
        pic.src=`./img/banner${carouselIndex}.jpg`;
    },2000)
</script>
</html>